{% extends "hs-base.html" %}
{% block div %}

    <div class="content">
                    <div class="container-fluid">

                        <div class="row">
                            <div class="col-12">
                                <div class="card-box">
                                    <h4 class="header-title">服务器状态 </h4>

                                    <div class="text-center mt-4 mb-4">
                                        <div class="row">
                                            <div class="col-xs-6 col-sm-3">
                                                <div class="card-box widget-flat border-custom bg-custom text-white">
                                                    <i class="fi-tag"></i>
                                                    <h3 class="m-b-10">44</h3>
                                                    <p class="text-uppercase m-b-5 font-13 font-600">服务器总数</p>
                                                </div>
                                            </div>
                                            <div class="col-xs-6 col-sm-3">
                                                <div class="card-box bg-primary widget-flat border-primary text-white">
                                                    <i class="fi-archive"></i>
                                                    <h3 class="m-b-10">13</h3>
                                                    <p class="text-uppercase m-b-5 font-13 font-600">个人总数</p>
                                                </div>
                                            </div>
                                            <div class="col-xs-6 col-sm-3">
                                                <div class="card-box widget-flat border-success bg-success text-white">
                                                    <i class="fi-help"></i>
                                                    <h3 class="m-b-10">6</h3>
                                                    <p class="text-uppercase m-b-5 font-13 font-600">已开启的服务器数量</p>
                                                </div>
                                            </div>
                                            <div class="col-xs-6 col-sm-3">
                                                <div class="card-box bg-danger widget-flat border-danger text-white">
                                                    <i class="fi-delete"></i>
                                                    <h3 class="m-b-10">1</h3>
                                                    <p class="text-uppercase m-b-5 font-13 font-600">已关闭的服务器数量</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    <table class="table table-hover m-0 tickets-list table-actions-bar dt-responsive nowrap" cellspacing="0" width="100%" id="datatable">
                                        <thead>
                                        <tr>
                                            <th>
                                                序号
                                            </th>
                                            <th>环境地址</th>
                                            <th>环境类别</th>
                                            <th>接口</th>
                                            <th>内存状态</th>
                                            <th>服务器状态</th>
                                            <th>修改日期</th>
                                            <th>创建日期</th>
                                            <th class="hidden-sm">操作</th>
                                        </tr>
                                        </thead>

                                        <tbody>
                                        <tr>
                                            <td><b>#1</b></td>
                                            <td>
                                                <a href="javascript: void(0);">
                                                    <span class="ml-2">127.0.0.1</span>
                                                </a>
                                            </td>

                                            <td>
                                                数据库
                                            </td>

                                            <td>
                                                5212
                                            </td>

                                            <td>
                                                <span class="badge badge-secondary">37%</span>
                                            </td>

                                            <td>
                                                <span class="badge badge-success">开启</span>
                                            </td>

                                            <td>
                                                2017/04/28
                                            </td>

                                            <td>
                                                2017/04/01
                                            </td>

                                            <td>
                                                <div class="btn-group dropdown">
                                                    <a href="javascript: void(0);" class="table-action-btn dropdown-toggle arrow-none btn btn-light btn-sm" data-toggle="dropdown" aria-expanded="false"><i class="mdi mdi-dots-horizontal"></i></a>
                                                    <div class="dropdown-menu dropdown-menu-right">
                                                        <a class="dropdown-item" href="#"><i class="mdi mdi-pencil mr-2 text-muted font-18 vertical-middle"></i>开启</a>
                                                        <a class="dropdown-item" href="#"><i class="mdi mdi-check-all mr-2 text-muted font-18 vertical-middle"></i>关闭</a>
                                                        <a class="dropdown-item" href="#"><i class="mdi mdi-delete mr-2 text-muted font-18 vertical-middle"></i>重启</a>
                                                        <a class="dropdown-item" href="#"><i class="mdi mdi-star mr-2 font-18 text-muted vertical-middle"></i>修改信息</a>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>


                                        </tbody>
                                    </table>
                                </div>
                            </div><!-- end col -->
                        </div>
                        <!-- end row -->

                    </div> <!-- container -->

                </div>


{% endblock %}